<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>回溯测试指标</title>
{{include 'pages/base/layout.html'}}
<script type="text/javascript" src="{{=URL('static','adminlte/plugins/highcharts/highcharts.src.js')}}"></script>
</head>
<body>

<div class='container'>
    <div class="row">
        <small><label  class="col-sm-1 control-label ">年华收益率</label></small>
        <small><label  class="col-sm-1 control-label ">基准年华收益率</label></small>
        <small><label  class="col-sm-1 control-label ">阿尔法</label></small>
        <small><label  class="col-sm-1 control-label ">贝塔</label></small>
        <small><label  class="col-sm-1 control-label ">夏普比率</label></small>
        <small><label  class="col-sm-1 control-label ">收益波动率</label></small>
        <small><label  class="col-sm-1 control-label ">信息比率</label></small>
        <small><label  class="col-sm-1 control-label ">最大回撤</label></small>
        <small><label  class="col-sm-3 control-label "></label></small>
    </div>
    <div class="row">
        <small><label id="l0" class="col-sm-1 control-label "></label></small>
        <small><label id="l1" class="col-sm-1 control-label "></label><small>
        <small><label id="l2" class="col-sm-1 control-label "></label></small>
        <small><label id="l3" class="col-sm-1 control-label "></label></small>
        <small><label id="l4" class="col-sm-1 control-label "></label></small>
        <small><label id="l5" class="col-sm-1 control-label "></label></small>
        <small><label id="l6" class="col-sm-1 control-label "></label></small>
        <small><label id="l7" class="col-sm-1 control-label "></label></small>
        <small><label id="l8" class="col-sm-3 control-label "></label></small>
    </div>
</div>
<div id="container" style="width: 98%; height: 400px; margin: 0 auto">
</div>
<script language="JavaScript">
$(document).ready(function() {
    var X_list= {{=data_json['X_list']}}
    var P_df= {{=data_json['P_df']}}
    var M_df={{=data_json['M_df']}}
    var rate_list={{=data_json['rate_list']}}
    $('#l0').text(rate_list[0]+'%')
    $('#l1').text(rate_list[1]+'%')
    $('#l2').text(rate_list[2])
    $('#l3').text(rate_list[3])
    $('#l4').text(rate_list[4])
    $('#l5').text(rate_list[5])
    $('#l6').text(rate_list[6])
    $('#l7').text(rate_list[7]+'%')


   var title = {
      text: '累计收益率'
   };
   var subtitle = {
      text: ''
   };
   var xAxis = {
      categories: X_list
   };
   var yAxis = {
      title: {
         text: '累积收益率 (%)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };
   var tooltip = {
      valueSuffix: '%'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
   var series =  [
      {
         name: '策略',
         data:P_df
      },
      {
         name: '基准',
         data:M_df
      }
   ];

    var json = {};
    json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.tooltip = tooltip;
    json.legend = legend;
    json.series = series;
//    json.credits = credits;
   $('#container').highcharts(json);

});
</script>
</body>
</html>